<template>
  <div class="member-center">
    <!-- Header -->
    <div class="header">
      <div @click='close' class="close" >关闭</div>
      <div class="title">会员中心</div>
      <div class="placeholder"></div>
    </div>

    <!-- User Profile -->
    <div class="user-profile">
      <div class="avatar">
        <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250404130513.jpg-MANLc8M5XJNM9mFCJV3z5A4FghmtS2.jpeg" alt="User Avatar" class="avatar-img" />
      </div>
      <div class="user-info">
        <div class="username">做个平淡的自己</div>
        <div class="vip-status">你还不是VIP会员</div>
      </div>
    </div>

    <!-- Membership Types -->
    <div class="membership-types">
      <div class="membership-card precious">
        <div class="icon">
          <div class="crown">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M5 4l4 4L12 4l3 4 4-4v14H5V4z" />
            </svg>
          </div>
        </div>
        <div class="info">
          <div class="name">珍心会员</div>
          <div class="description">结识海量认证用户</div>
        </div>
      </div>
      <div class="membership-card super">
        <div class="icon">
          <div class="diamond">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 2l4 4 6 2-6 2-4 4-4-4-6-2 6-2 4-4z" />
            </svg>
          </div>
        </div>
        <div class="info">
          <div class="name">超级会员</div>
          <div class="description">全面提升交友效率</div>
        </div>
      </div>
    </div>

    <!-- Inbox Section -->
    <div class="inbox-section">
      <div class="connections">
        <div class="connection-avatar blur-1"></div>
        <div class="connection-avatar main">
          <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250404130513.jpg-MANLc8M5XJNM9mFCJV3z5A4FghmtS2.jpeg" alt="Main User" />
          <div class="mail-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
            </svg>
          </div>
        </div>
        <div class="connection-avatar blur-2"></div>
        <div class="connection-avatar blur-3"></div>
        <div class="connection-lines"></div>
      </div>
      <div class="inbox-info">
        <div class="inbox-title">解锁你的收件箱</div>
        <div class="inbox-description">查看回复所有消息</div>
      </div>
    </div>

    <!-- Pagination Dots -->
    <div class="pagination-dots">
      <div class="dot"></div>
      <div class="dot active"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>

    <!-- Privilege Button -->
    <div class="privilege-button">
      尊享 7 项特权
    </div>

    <!-- Pricing Options -->
    <div class="pricing-options">
      <div class="price-card selected">
        <div class="discount-tag">限时 8 折</div>
        <div class="duration">12<span class="unit">个月</span></div>
        <div class="original-price">¥ 388</div>
        <div class="current-price">¥<span class="price-value">308</span></div>
        <div class="daily-price">日均0.84元</div>
      </div>
      <div class="price-card">
        <div class="duration">3<span class="unit">个月</span></div>
        <div class="current-price">¥<span class="price-value">348</span></div>
        <div class="daily-price">日均3.8元</div>
      </div>
      <div class="price-card">
        <div class="duration">1<span class="unit">个月</span></div>
        <div class="current-price">¥<span class="price-value">248</span></div>
        <div class="daily-price">日均8.2元</div>
      </div>
    </div>

    <!-- Customer Service -->
    <div class="customer-service">
      <div class="service-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 18v-6a9 9 0 0 1 18 0v6"></path>
          <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path>
        </svg>
      </div>
      <div class="service-text">专属客服在线中，</div>
      <div class="service-link">有问题点这里去微信添加她>></div>
    </div>

    <!-- Activate Button -->
    <div class="activate-button" @click='payMent'>
      立即开通
    </div>

    <!-- Agreement -->
    <div class="agreement">
      开通前确认 <span class="agreement-link">《珍爱服务协议》</span> <span class="agreement-link">《隐私协议》</span>
    </div>

    <!-- Privileges Section -->
    <div class="privileges-section">
      <div class="privileges-title">珍心会员尊享 7 项特权</div>
      <div class="privileges-list">
        <div class="privilege-item">
          <div class="privilege-icon inbox"></div>
          <div class="privilege-name">解锁收件箱</div>
        </div>
        <div class="privilege-item">
          <div class="privilege-icon message"></div>
          <div class="privilege-name">解锁消息发送</div>
        </div>
        <div class="privilege-item">
          <div class="privilege-icon video"></div>
          <div class="privilege-name">免费畅享直播</div>
        </div>
        <div class="privilege-item">
          <div class="privilege-icon filter"></div>
          <div class="privilege-name">更多搜索条件</div>
        </div>
        <div class="privilege-item">
          <div class="privilege-icon photo"></div>
          <div class="privilege-name">超大相册空间</div>
        </div>
        <div class="privilege-item">
          <div class="privilege-icon badge"></div>
          <div class="privilege-name">尊贵会员标识</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const close=()=>{

    router.go(-1)

}

const payMent=()=>{

  router.push('/pay')

}
</script>

<style scoped>
.member-center {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #a17bfc 0%, #a17bfc 40%, #f5f5f5 40%, #f5f5f5 100%);
  min-height: 100vh;
  position: relative;
  color: #333;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  color: white;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

.close {
  font-size: 16px;
}

.placeholder {
  width: 40px;
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 20px;
  color: white;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}

.vip-status {
  font-size: 14px;
  opacity: 0.9;
}

.membership-types {
  display: flex;
  padding: 0 15px;
  gap: 10px;
  margin-bottom: 20px;
}

.membership-card {
  flex: 1;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.membership-card.precious {
  border-left: 4px solid #9370db;
}

.membership-card.super {
  border-left: 4px solid #dda0dd;
}

.icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.crown {
  color: #9370db;
  width: 24px;
  height: 24px;
}

.diamond {
  color: #dda0dd;
  width: 24px;
  height: 24px;
}

.info .name {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 4px;
}

.info .description {
  font-size: 12px;
  color: #666;
}

.inbox-section {
  background-color: white;
  margin: 0 15px;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.connections {
  position: relative;
  width: 120px;
  height: 80px;
}

.connection-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: absolute;
}

.connection-avatar.blur-1 {
  top: 10px;
  left: 0;
  opacity: 0.5;
}

.connection-avatar.blur-2 {
  top: 10px;
  right: 0;
  opacity: 0.5;
}

.connection-avatar.blur-3 {
  bottom: 0;
  left: 30px;
  opacity: 0.5;
}

.connection-avatar.main {
  top: 20px;
  left: 40px;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  overflow: hidden;
  z-index: 2;
}

.connection-avatar.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mail-icon {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background-color: #ffa500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.mail-icon svg {
  width: 14px;
  height: 14px;
}

.connection-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.inbox-info {
  flex: 1;
  padding-left: 20px;
}

.inbox-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}

.inbox-description {
  font-size: 14px;
  color: #666;
}

.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 15px 0;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ddd;
}

.dot.active {
  background-color: #a17bfc;
  width: 15px;
  border-radius: 3px;
}

.privilege-button {
  position: absolute;
  right: 15px;
  top: 360px;
  background-color: #7b68ee;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(123, 104, 238, 0.3);
}

.pricing-options {
  display: flex;
  padding: 0 15px;
  gap: 10px;
  margin-top: 40px;
}

.price-card {
  flex: 1;
  background-color: white;
  border-radius: 10px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.price-card.selected {
  border: 2px solid #7b68ee;
}

.discount-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff7f50;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.duration {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 10px;
}

.unit {
  font-size: 14px;
  font-weight: normal;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}

.current-price {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.price-value {
  font-size: 24px;
}

.daily-price {
  font-size: 12px;
  color: #666;
  background-color: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
}

.price-card.selected .daily-price {
  background-color: #e6e0ff;
  color: #7b68ee;
}

.customer-service {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  font-size: 14px;
  color: #666;
}

.service-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  color: #7b68ee;
}

.service-link {
  color: #7b68ee;
}

.activate-button {
  background-color: #7b68ee;
  color: white;
  text-align: center;
  padding: 15px;
  border-radius: 30px;
  margin: 10px 15px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
}

.agreement {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin: 15px 0;
}

.agreement-link {
  color: #7b68ee;
}

.privileges-section {
  padding: 20px 15px;
}

.privileges-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

.privileges-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.privilege-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.privilege-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #e6e0ff;
  margin-bottom: 8px;
}

.privilege-name {
  font-size: 14px;
  color: #666;
}

.privilege-icon.inbox {
  background-color: #e6e0ff;
  position: relative;
}

.privilege-icon.inbox::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #7b68ee;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.privilege-icon.message {
  background-color: #e6e0ff;
  position: relative;
}

.privilege-icon.message::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #7b68ee;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.privilege-icon.video {
  background-color: #e6e0ff;
  position: relative;
}

.privilege-icon.video::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #7b68ee;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.privilege-icon.filter {
  background-color: #e6e0ff;
  position: relative;
}

.privilege-icon.filter::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #7b68ee;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.privilege-icon.photo {
  background-color: #e6e0ff;
  position: relative;
}

.privilege-icon.photo::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #7b68ee;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.privilege-icon.badge {
  background-color: #e6e0ff;
  position: relative;
}

.privilege-icon.badge::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #7b68ee;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>